<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="title"
    width="40%"
  >
    <el-alert
      :closable="false"
      :style="{marginBottom: '20px'}"
      show-icon
      title="提示: 客户代码、产品型号、工艺规范编号、工序号和封装形式至少填写一个"
      type="info"/>
    <!-- <dynForm
      ref="dataForm"
      :is-inline="false"
      :info-form="infoForm"
      :search-tags="searchTags"
      :select-list="selectList"
      :form-disable="formDisable"
      :rules="rules"
    /> -->
    <el-form
      :rules="rules"
      :disabled="formDisable"
      :model="infoForm"
      label-width="120px">
      <el-form-item :label="this.$t('customer')">
        <el-input v-model="infoForm.customCode" :placeholder="`${$t('pleaseInput')}${$t('customer')}`" clearable/>
      </el-form-item>
      <el-form-item :label="this.$t('productName')">
        <el-input v-model="infoForm.productName" :placeholder="`${$t('pleaseInput')}${$t('productName')}`" clearable/>
      </el-form-item>

      <el-form-item :label="this.$t('processNo')">
        <el-input v-model="infoForm.processFlow" :placeholder="`${$t('pleaseInput')}${$t('processNo')}`" clearable/>
      </el-form-item>
      <el-form-item :label="this.$t('processSpecificationNumber')">
        <el-input v-model="infoForm.processSpecificationNo" :placeholder="`${$t('pleaseInput')}${$t('processSpecificationNumber')}`" clearable/>
      </el-form-item>
      <el-form-item :label="this.$t('packageType')">
        <el-select
          v-model="infoForm.packageType"
          :placeholder="`${$t('pleaseSelect')}${$t('packageType')}`"
          clearable
          filterable
          allow-create
          default-first-option
          @change="addpackageTypeList"
        >
          <el-option
            v-for="item in packaingCodeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form ref="daysForm" :model="infoForm" :disabled="cycleDisable" :rules="rules" label-width="120px">
      <el-form-item :label="$t('cycle')" prop="cycle">
        <el-input
          v-model="infoForm.cycle"
          :style="{ width: '200px' }"
          :placeholder="`${$t('pleaseInput')}${$t('cycle')}`"
          onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
          clearable
        />
        <span>天</span>
      </el-form-item>
      <el-form-item :label="$t('traceCycle')" prop="traceCycle">
        <el-input
          v-model="infoForm.traceCycle"
          :style="{ width: '200px' }"
          :placeholder="`${$t('pleaseInput')}${$t('traceCycle')}`"
          onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
          clearable
        />
        <span>天</span>
      </el-form-item>
      <el-form-item :label="$t('deviationSetting')" prop="deviation">
        <el-input
          v-model="infoForm.deviation"
          :placeholder="`${$t('pleaseInput')}${$t('deviationSetting')}`"
          clearable
        />
      </el-form-item>
    </el-form>
    <span v-show="!cycleDisable" slot="footer">
      <div class="btn-box">
        <div class="btn-left">
          <el-tooltip class="item" effect="dark" content="该保存会自动新增SBL" placement="top-start">
            <el-button
              v-btnThrottle="doWarningSave"
              type="primary"
              icon="el-icon-folder-checked"
            >warnning保存</el-button>
          </el-tooltip>
        </div>
        <div class="btn-right">
          <el-button icon="el-icon-circle-close" @click="handleClose">{{
            $t("cancel")
          }}</el-button>
          <el-button
            v-btnThrottle="doSave"
            type="primary"
            icon="el-icon-receiving"
          >{{ $t("save") }}</el-button>
        </div>
      </div>
    </span>
  </el-dialog>
</template>

<script>
import {
  doAdd,
  doUpdate,
  getInfo,
  doAddAutoSbl,
  getPackageTypeList
} from '@/api/auto-analyze-warning/configCycle'
export default {
  name: 'EditCycle',
  data() {
    const validateCycle = (rule, value, callback) => {
      if (value < 1 || !value) {
        callback(new Error('计算周期需要大于等于1'))
      } else {
        callback()
      }
    }

    const validateTraceCycle = (rule, value, callback) => {
      if (value < 1 || !value) {
        callback(new Error('追溯时间需要大于等于1'))
      } else {
        callback()
      }
    }

    return {
      dialogVisible: false,
      title: '',
      formDisable: false,
      cycleDisable: false,
      infoForm: {},
      packaingCodeList: [],
      selectList: {},
      searchTags: Object.freeze([
        { label: this.$t('customCode'), prop: 'customer', tag: 'DynInput' },
        { label: this.$t('productName'), prop: 'productName', tag: 'DynInput' },
        { label: this.$t('processNo'), prop: 'processFlow', tag: 'DynInput' },
        {
          label: this.$t('processSpecificationNumber'),
          prop: 'processSpecificationNo',
          tag: 'DynInput'
        },
        {
          label: this.$t('packageType'),
          prop: 'packaingFormsCode',
          tag: 'DynSelect'
        }
      ]),
      rules: {
        cycle: [
          { required: true, validator: validateCycle, trigger: 'blur' }
        ],
        traceCycle: [
          { required: true, validator: validateTraceCycle, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async handleOpen(row, isDetail = false) {
      if (row && row.id) {
        if (isDetail) {
          this.cycleDisable = isDetail
          this.title = this.$t('details')
        } else {
          this.title = this.$t('modify')
        }
        this.formDisable = true
        const res = await getInfo({ id: row.id })
        this.infoForm = res.data
      } else {
        this.formDisable = false
        this.title = this.$t('add')
      }
      this.dialogVisible = true
      this.getPackageTypes()
      this.$nextTick(() => {
        this.$refs['daysForm'].clearValidate()
      })
    },
    doSave() {
      this.$refs['daysForm'].validate((valid) => {
        if (valid) {
          if (this.infoForm.id) {
            doUpdate(this.$clearNull(this.infoForm)).then((res) => {
              this.$betterTips(res, this.handleClose, this.handleUpdate)
            })
          } else {
            doAdd(this.$clearNull(this.infoForm)).then((res) => {
              this.$betterTips(res, this.handleClose, this.handleUpdate)
            })
          }
        }
      })
    },
    doWarningSave() {
      doAddAutoSbl(this.$clearNull(this.infoForm)).then((res) => {
        this.$betterTips(res, this.handleClose, this.handleUpdate)
      })
    },
    addpackageTypeList(value) {
      const find = this.packaingCodeList.map(c => c.id).some(v => v === value)
      if (!find) {
        this.packaingCodeList.unshift({ id: value, name: value })
      }
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleUpdate() {
      this.$emit('initList')
    },
    async getPackageTypes() {
      const res = await getPackageTypeList()
      // this.$set(this.selectList, 'packaingFormsCode', res.data)
      this.packaingCodeList = res.data
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}
.btn-box{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
